<template>
	<view class="" style="padding: 32rpx;height: 100vh;">
		<view :style="{height: titleNavHeight + statusBarHeight + 5 + 'px'}"
			style="position: fixed;top: 0;left: 0;right: 0;z-index: 9999;background-color: #ffffff;
			border-bottom: 1px solid #ebedf0;">
			<view :style="{height: titleNavHeight + 'px', top: statusBarHeight + 'px', width: '100%'}"
				class="nav-bar">
				<u-icon name="arrow-left" size="42" style="width: 40rpx;height: 40rpx;margin-right: 20rpx;"
					@click="go_back"></u-icon>
				<text class="text">审批</text>
			</view>
		</view>
		<view :style="{height: titleNavHeight + statusBarHeight + 5 + 'px'}"></view>

		<u-form ref="formTaskCommit" style="margin: 32rpx 0px; height: calc(100vh - 140px);" label-width="80px">
			<view style="background-color: #fff;">
				<field-select v-if="operation.type === 'free_jump'" v-model="formData.targetTaskKey" label="驳回节点"
					placeholder="请选择跳转任务节点" :required="true" :dataList="jumpTaskList"
					@change="taskOnValueChange"></field-select>

				<field-select v-if="processInstanceId != null && taskId != null && operation.type === 'rejectToTask'"
					v-model="formData.targetTaskKey" label="驳回节点" :required="true" :dataList="taskWidgets"
					@change="nodeOnValueChange"></field-select>

				<user-select ref="userSelect"
					v-if="showAssignSelect || operation.type === 'free_jump'"
					label="指派用户"
					v-model="userName"
					:multiple="true"
					:filterObject="otherFilterObject"
					@change="onValueChange"
				/>

				<field-select v-if="operation.type === 'multi_minus_sign'"
					v-model="formData.assignee" label="减签用户" :required="true" :dataList="multiSignAssigneess"
					@change="userOnValueChange"></field-select>

				<u-field v-if="['multi_consign','multi_minus_sign','multi_sign'].indexOf(operation.type) === -1"
					type="textarea" v-model="formData.message" label="审批意见" required maxlength="50"></u-field>
			</view>
		</u-form>
		<u-row style="padding: 0px 16px;position: fixed;bottom: 16px;right: 0;left: 0;">
			<u-button type="primary" size="medium" @click="onSubmitClick" :custom-style="customStyle">确定</u-button>
		</u-row>
	</view>
</template>

<script>
	import {
		DropdownWidget
	} from '@/utils/widget.js';
	import { FlowOperationController } from '@/api/flowController.js';
	import {getBoundingClientRect} from "@/utils";
	export default {
		name: 'TaskCommit',
		props: {
			title: {
				type: String
			},
			operation: {
				type: Object,
				required: true
			},
			processInstanceId: {
				type: String
			},
			processDefinitionId: {
				type: String
			},
			taskId: {
				type: String
			},
			finishedInfo: {
				type: Object
			}
		},
		data() {
			const {
				windowWidth,
				statusBarHeight
			} = uni.getSystemInfoSync()
			const rect = getBoundingClientRect(windowWidth, statusBarHeight);
			return {
				windowWidth: windowWidth,
				statusBarHeight: statusBarHeight,
				titleNavHeight: (rect.top - statusBarHeight) * 2 + rect.height,
				emptyWidth: rect.left - 10,

				selectTaskShow: false, //选择任务节点
				userShow: false, //选择减签用户
				rejectShow: false, //选择驳回节点
				formData: {
					message: undefined,
					assignee: undefined,
					targetTaskKey: undefined
				},
				// multiSignAssignees: new DropdownWidget(this.listMultiSignAssigneesDropdownData),
				// taskWidget: new DropdownWidget(this.loadTaskWidgetDropdownData),
				multiSignAssigneess: [],
				taskWidgets: [],
				userName: [],
				otherFilterObject: undefined,
				jumpTaskList: [],
				customStyle: {
					margin: '0 32rpx',
					width: 'calc(100% - 64rpx)',
					height:'88rpx',
					borderRadius:'0'
				}
			}
		},
		methods: {
			go_back(){
				this.onBack();
			},
			onBack(success = false, data) {
				this.$emit('close', success, data);
			},
			onSubmitClick() {
				console.log('111')
				if (Array.isArray(this.userName) && this.userName.length > 0) {
					let selectUser = this.$refs.userSelect ? this.$refs.userSelect.getSelectItems() : [];
					this.formData.assignee = selectUser.map(item => item.loginName).join(',');
				}
				console.log(this.userName);
				console.log(this.formData)
				this.onBack(true, this.formData);
				// this.$refs.formTaskCommit.validate((res)=>{
				// 	console.log(res)
				// })
			},
			actionSheetTaskNodes(e) { //选择任务节点
				console.log(e)
			},
			taskOnValueChange(val) { //选择任务节点回调
				console.log(val)
			},
			actionSheetUser(e) { //选择减签用户
				console.log(e)
			},
			userOnValueChange(val) { //选择减签用户回调
				console.log(val)
			},
			actionSheetRejectNodes(e) { //选择驳回节点
				console.log(e)
			},
			nodeOnValueChange(val) { //选择驳回节点回调
				console.log(val)
				// console.log(this.formData.targetTaskKey)
			},
			onValueChange(e) { //选择指派用户确认回调
				console.log(e)
				// console.log(this.userName)
				// this.userName = e
			},
			loadTaskWidgetDropdownData() {
				// return new Promise((resolve, reject) => {
				FlowOperationController.listRejectCandidateUserTask(this, {
					processInstanceId: this.processInstanceId,
					taskId: this.taskId
				}).then(res => {
					let data = res.map((item) => {
						return {
							id: item.taskKey,
							name: item.showName
						}
					})
					this.taskWidgets = data
					console.log(this.taskWidgets)
					// resolve(res);
				}).catch(e => {
					// reject(e);
				});
				// });
			},
			listMultiSignAssigneesDropdownData() {
				// return new Promise((resolve, reject) => {
				lowOperationController.listMultiSignAssignees(this, {
					processInstanceId: this.processInstanceId,
					taskId: this.taskId
				}).then(res => {
					let data = (res.sort((val1, val2) => {
						return val1.approved === val2.approved ? 0 : (val1.approved ? 1 : -1);
					}));
					console.log(data)
					let datas = data.map((item) => {
						return {
							id: item.assignee,
							name: item.showName
						}
					})
					this.multiSignAssigneess = datas
					console.log(this.multiSignAssigneess)
					// 将已经处理过会签任务的处理人放到列表最后
					// resolve(res.sort((val1, val2) => {
					//   return val1.approved === val2.approved ? 0 : (val1.approved ? 1 : -1);
					// }));
				}).catch(e => {
					// reject(e);
				});
				// });
			},
			loadAllUserTask() {
				FlowOperationController.listAllUserTask(this, {
					processDefinitionId: this.processDefinitionId
				}).then(res => {
					this.jumpTaskList = res;
				}).catch(e => {
					console.log(e);
				});
			}
		},
		computed: {
			showAssignSelect() {
				let showAssignSelect = false;
				console.log(this.operation)
				// 如果是会签操作，判断是否在流程内设置了会签人
				if (this.operation.type === this.SysFlowTaskOperationType.MULTI_SIGN) {
					showAssignSelect = !this.operation.multiSignAssignee ||
						!Array.isArray(this.operation.multiSignAssignee.assigneeList) ||
						this.operation.multiSignAssignee.assigneeList.length <= 0;
				}
				return [
					this.SysFlowTaskOperationType.TRANSFER,
					this.SysFlowTaskOperationType.CO_SIGN,
					this.SysFlowTaskOperationType.BFORE_CONSIGN,
					this.SysFlowTaskOperationType.AFTER_CONSIGN,
					this.SysFlowTaskOperationType.SET_ASSIGNEE
				].indexOf(this.operation.type) !== -1 || showAssignSelect;
			},
			multiSelect() {
				// 转办、加签、会签允许多选
				return [
					this.SysFlowTaskOperationType.CO_SIGN,
					this.SysFlowTaskOperationType.MULTI_SIGN,
					this.SysFlowTaskOperationType.BFORE_CONSIGN,
					this.SysFlowTaskOperationType.AFTER_CONSIGN,
					this.SysFlowTaskOperationType.TRANSFER,
					this.SysFlowTaskOperationType.SET_ASSIGNEE
				].indexOf(this.operation.type) !== -1;
			}
		},
		mounted() {
			if (this.operation && this.operation.type === this.SysFlowTaskOperationType.SET_ASSIGNEE && this.operation.multiSignAssignee) {
				if (this.operation.multiSignAssignee.assigneeType && this.operation.multiSignAssignee.assigneeList) {
					this.otherFilterObject = {
						USER_FILTER_GROUP: JSON.stringify({
							type: this.operation.multiSignAssignee.assigneeType,
							values: this.operation.multiSignAssignee.assigneeList
						})
					};
				}
			}
			if (this.operation.type === this.SysFlowTaskOperationType.SIGN_REDUCTION) {
				// this.multiSignAssignees.onVisibleChange(true).catch(e => {});
				this.listMultiSignAssigneesDropdownData()
			}
			if (this.processInstanceId != null && this.taskId != null && this.operation.type === this.SysFlowTaskOperationType.REJECT_TO_TASK) {
				// this.taskWidget.onVisibleChange(true).catch(e => {});
				this.loadTaskWidgetDropdownData()
			}
			if (this.processDefinitionId != null && this.operation.type === this.SysFlowTaskOperationType.FREE_JUMP) {
				this.loadAllUserTask();
			}
		}
	}
</script>

<style lang="less" scoped>
	.nav-bar {
			position: absolute;
			display: flex;
			flex-direction: row;
			align-items: center;
			padding-left: 20rpx;

			.text {
				width: calc(100vw - 80px);
				color: #323233;
				font-weight: 500;
				font-size: 30rpx;
				display: flex;
				justify-content: center;
				justify-items: center;
			}

			.nav-right {
				display: flex;

				.mobile-font {
					color: #707070;
					font-size: 36rpx;

					&+.mobile-font {
						margin-left: 12rpx;
					}
				}
			}
		}
</style>
